<template>
    <div class="container">
        <van-list>
            <van-cell v-for="item in attendance.details" :key="item.studentId">
                <van-row>
                    <van-col span="8">{{ item.studentNumber }}</van-col>
                    <van-col span="8">{{ item.studentName }}</van-col>
                    <van-col span="8" v-if="attendance.state == '已锁定'">
                        <van-field v-model="item.status" is-link readonly label="考勤状态" @click="openPicker(item)" />
                    </van-col>
                    <van-col span="8" v-else>
                        {{ item.status }}
                    </van-col>
                </van-row>
            </van-cell>
        </van-list>
        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker :columns="statusOptions" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>

        <van-button v-if="attendance.state == '已锁定'" type="primary" block style="margin-top: 20px;"
            @click="$emit('handle', 'tune', attendance, student)">调整考勤</van-button>
        <van-button v-if="attendance.state == '已锁定'" type="primary" block style="margin-top: 20px;"
            @click="$emit('handle', 'submit', attendance, student)">提交考勤</van-button>
    </div>
</template>

<script>
export default {
    props: {
        attendance: {
            type: Object,
            required: true
        },
        student: {
            type: Object,
            default: () => ({
                id: '123',
                isAdmin: false
            }),
            required: true
        }
    },
    data() {
        return {
            showPicker: false,
            currentItem: null,
            statusOptions: [
                { text: '已签到', value: '已签到' },
                { text: '缺勤', value: '缺勤' },
                { text: '迟到', value: '迟到' },
                { text: '早退', value: '早退' },
                { text: '事假', value: '事假' },
                { text: '病假', value: '病假' },
                { text: '公假', value: '公假' }
            ]
        };
    },
    methods: {
        openPicker(item) {
            if (this.attendance.state == '已锁定') {
                this.currentItem = item;
                this.showPicker = true;
            }
        },
        onConfirm({ selectedOptions }) {
            if (this.currentItem && selectedOptions.length > 0) {
                this.currentItem.status = selectedOptions[0].value;
            }
            this.showPicker = false;
        }
    }
}
</script>

<style scoped>
.container {
    padding: 20px;
}

.van-card {
    margin-bottom: 20px;
}

.van-cell {
    padding: 10px 0;
}
</style>